<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #banner {

        }
        #banner ul {
            list-style: none;
        }
        #banner ul li {

        }
        #banner ul li img{
            position: absolute;
            left: 0;
            right: 0;
            width: 100%;
            height: 450px;
        }
    </style>
</head>
<body>
<div id="banner">
    <ul>
        <li><img class='imgs' src="img/banner1.jpg" alt=""></li>
        <li><img class='imgs' src="img/banner2.jpg" alt=""></li>
        <li><img class='imgs' src="img/banner3.jpg" alt=""></li>
        <li><img class='imgs' src="img/banner4.jpg" alt=""></li>
        <li><img class='imgs' src="img/banner5.jpg" alt=""></li>
        <li><img class='imgs' src="img/banner6.jpg" alt=""></li>
    </ul>
</div>
</body>
<script type="application/javascript">
  var zindex = 1
  var j = 0
  main()

  //主执行函数
  function main() {
    var bannerObj = document.getElementById('banner')
    var li = bannerObj.getElementsByTagName('img')
    // var zindex = 1
    init(li)

    var timer = setInterval(function () {
      starRoll(li)
    }, 1000)
  }

  // 初始化
  function init(liObj) {
    liObj[0].style.zIndex = 1
    for(var i = 0; i < liObj.length; i++) {
      liObj[i].style.zIndex = 0
    }
  }

  // 开始动画
  function starRoll(liObj) {
    zindex++
    init(liObj)
    if (j >= liObj.length) j = 0
    console.log(j)
    liObj[j].style.zIndex = zindex
    j++
  }
</script>
</html>
